import styled from 'styled-components'

export const GroupStyle = styled.div`

  .group-info{
    justify-content: flex-start;
    margin: .16rem .32rem;
    background-color: white;
    /* height: 9.01rem; */
    border-radius: .15rem;
    box-sizing: border-box;
    padding: .4rem .4rem;


    .goods-item{
      width: 100%;
      border: dashed #f5f5f5 1px;
      height: 2.37rem;
      border-radius: .15rem;
      box-sizing: border-box;
      padding: .16rem .16rem;
      background-color: #F5F5F5;

    }

    .tuanid{
      margin-top: .4rem;
      font-size: .29rem;
      color: #c1c1c1;
      font-weight: 500;
    }

    .status-text{
      margin-top: .3rem;
      font-size: .4rem;
      font-weight: bold;
      span{
        font-size: .4rem;
        font-weight: bold;
        color: #ff762e;
      }
    }

    .lack-time-text{
      margin-top: .39rem;
      font-size: .29rem;
      font-weight: 500;
    }
    .timer{
      margin-top: .39rem;
      height: .45rem;
      width: 3.89rem;
      /* background-color: #FF4B4B; */
      div{
        width: 100%;
        .box{
          /* margin: 0 .15rem; */
          text-align: center;
          display: block;
          width: .4rem;
          height: .4rem;
          background-color: #FF4B4B;
          color: white;
          font-weight: bold;
          line-height: .4rem;
        }
      }
    }

    .gohome{
      margin-top: .4rem;
      color: #ff762e;
      font-weight: 500;
    }

    .底部团失败或团成功底部{
      width: 100% ;
      bottom: .6rem; 
      height: 1.5rem;
    }

    .gohome-bottom{
      border: none;
      height: 100%;
      width: 30%;
      background-color: #474747 ;
      color: white;
      font-size: .4rem;
      font-weight: bold;
      text-align: center;
      line-height: 1.13rem;
    }

    .share-array{
      position: absolute;
      width: 100%;
      height: 100vh;
      background-color: rgba(34, 40, 54, 0.2);
      top: 0;
      text-align: right;
      img{
        margin-right: 15%;
      }

    }



    .share{
      margin-top: .8rem;
      border: none;
      width: 7.15rem;
      height: 1.13rem;
      text-align: center;
      background-color: #FF762E;
      line-height: .1.13rem;
      border-radius: .75rem;
      color: white;
      font-size: .4rem;
      font-weight: bold;
    }

    .bottom-share{
      width: 70%;
      height: 100%;
      border: none;
      /* height: 1.13rem; */
      text-align: center;
      background-color: #FF762E;
      line-height: .1.13rem;
      color: white;
      font-size: .4rem;
      font-weight: bold;
    }

    progress{
      margin-top: .4rem;
      width: 100%;
      height: 13px;
      background:#f5f5f5;
      border-radius: .2rem;
    }

    /* 总长度背景色 */
    progress::-webkit-progress-bar{
      background-color: #f5f5f5;
      border-radius: .2rem;
    }
    /* 已完成进度 */
    progress::-webkit-progress-value{
      background-color: #ff762e;
      border-radius: .2rem;
    }

    /* 团状态 */
    .tuan-status{
      
      position: absolute;
      right: .48rem;
      top: 1.07rem;
      width: 2.68rem;
      height: 2.67rem;

    }

  }
  .group-member{
    margin: .16rem .32rem;
    background-color: white;
    border-radius: .15rem;

    .first-group{
      /* 团长 */
      box-sizing: border-box;
      padding: 0 .425rem;
      padding-top: .31rem;
      padding-bottom: .4rem;
      border-bottom: solid rgba(34, 40, 54, 0.2) 1px;
      .left{
        justify-content: flex-start;
        .avatar{
          width: .8rem;
          height: .8rem;
          border-radius: 50%;

        }
        .info{
          margin-left: .41rem;
          .name{
            justify-content: flex-start;
            font-size: .37rem;
            font-weight: bold;
            img{
              margin-left: .19rem;
              height: .53rem;
              width: auto;
            }
          }
          .address{
            font-weight: 500;
            opacity: .5;
            /* 需要换行 */
            
          }
        }
      }

      .tel{
        /* right */
        img{
          width: .55rem;
          height: .55rem;
        }
      }
    }

    .group-list{
      /* 团员 */
      box-sizing: border-box;
      padding: 0 .425rem;
      padding-bottom: .4rem;
      /* border: solid red 1px; */
      overflow: scroll;
      height: 4.58rem;
      .item{
        width: 100%;
        margin-top: .4rem;
        .top{
        border-bottom: dashed 1px rgba(34, 40, 54, 0.2);
        padding-bottom: .19rem;
        box-sizing: border-box;
        width: 100%;
        img{
          width: .8rem;
          height: .8rem;
        }
        .name{
          font-weight: 500;
          margin-left: .44rem;
          align-items: flex-start;
        }
        .time-text{
          font-weight: bold;
          opacity: .5;
        }
      }
      .bottom{
        width: 100%;
        margin-top: .16rem;
        .goods-name{
          font-weight: 500;
        }
        .num{
          font-weight: 500;
        }
        }
      }
    
    


    }
    
  }

  
 

`

export const PingTuanListStyle = styled.div`
  color: #474747;
  .pingtuan-list-box{
    .top-bar{
      background-color: white;
      height: .92rem;
      padding: 0 .49rem;
      position: sticky;
      top: 0px;
      z-index: 11;
      
      .item{
        p{
          align-items: flex-start;
        }
        p::after{
          content: '';
          display: block;
          border-bottom: solid 1px rgba(136, 136, 136, .9);
          border-left: solid 1px  rgba(136, 136, 136, .9);
          width: .21rem;
          height: .21rem;
          transform: rotate(-45deg);
          margin-left: .16rem;
          margin-top: .06rem;
        }
      }
    }

    .container{
      padding: .16rem .32rem;
      box-sizing: border-box;
    }

  }

  .pick{
    z-index: 100;
    position: fixed;
    width: 100%;
    top: 1rem;
    height: 2.36rem;
    background-color: white;
    /* margin-top: .16rem; */
    .pickItem{
      align-items: flex-start;
      justify-content: center;
      padding-left:  .72rem;
      height: 1.17rem;
      border-top:  solid 1px rgba( 34, 40, 54, .2 );
      box-sizing: border-box;
    
    }
  }

  .pick-area{
    /* height: 8.16rem; */
    z-index: 100;
    position: fixed;
    width: 100%;
    top: 1rem;
    background-color: white;
    border-top:  solid 1px rgba( 34, 40, 54, .2 );
    .left-right{
      width: 100%;
      height: 100%;

      .top{
        margin-top: .4rem;
        margin-left: .72rem;
        font-size: .29rem;
        opacity: .5;
      }
      .content{
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        .item{
          font-weight: 500;
          margin-top: .39rem;
        }
      }

    }

  }


`